<template>
  <div class="zhuang-tai">
    <Breadcrumb :breadStr="breadStr"></Breadcrumb>
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <h2>相关配置</h2>
      <el-divider></el-divider>
      <el-tabs
        tab-position="right"
        v-model="tabActiveName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="岗位配置"
          name="gangwei"
        >
          <GangweiSetting></GangweiSetting>
        </el-tab-pane>
        <el-tab-pane
          label="类别配置"
          name="category"
        >
          <CategorySetting></CategorySetting>
        </el-tab-pane>
        <el-tab-pane
          label="人员定级配置"
          name="grade"
        >
          <GradeSetting></GradeSetting>
        </el-tab-pane>
        <el-tab-pane
          label="办公地点配置"
          name="workaddr"
        >
          <WorkaddrSetting></WorkaddrSetting>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '../common/Breadcrumb'
import GangweiSetting from './zhuangtai/GangweiSetting'
import CategorySetting from './zhuangtai/CategorySetting'
import GradeSetting from './zhuangtai/GradeSetting'
import WorkaddrSetting from './zhuangtai/WorkaddrSetting'
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  components: {
    Breadcrumb,
    GangweiSetting,
    CategorySetting,
    GradeSetting,
    WorkaddrSetting
  },
  data () {
    return {
      // 标签页激活项
      tabActiveName: 'gangwei'
    }
  },
  created () {
    this.getBread()
  },
  methods: {
    // 修改右侧的标签页,tab.name 表示 gangwei、category、grade、workaddr
    handleClick (tab) {
      switch (tab.name) {
        case 'gangwei':
          // TODO  重新进入岗位配置，要把手风琴全部折叠(打开的时候会获取数据)
          break
        case 'category':
          break
        case 'grade':
          break
        case 'workaddr':
          break

        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
